<template>
  <div v-if="list.length != 0">
    <!-- 这个页面的吸顶写好了 -->
    <van-sticky :offset-top="0">
        <van-nav-bar title="当前城市"  >
          <template #left >
            <van-icon name="cross" @click="$router.go(-1)"/>
          </template>
        </van-nav-bar>

      <!-- 搜索栏 -->
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @input="oncheck"
      >
        <template #action >
          <div @click="onSearch" v-if="showClear">清除</div>
        </template>
      </van-search>

    </van-sticky>



      <!-- 描述文字 -->
      <div v-if="showDes">
        <van-empty description="无城市信息" v-if="barList.length==0"/>
        <van-cell :title="item.name" v-for="(item,index) in barList" :key="index+'abcde'" @click="pushRouter(item.cityId)"/>
      </div>

 
    <div v-if="showBar" >
      <van-cell title="热门城市" />
      <van-button class="hotCity-button" type="default" v-for="(item,index) in hotCitys" :key="index+'hot'" @click="pushRouter(item.cityId)">{{item.name}}</van-button>
    <!-- 列表 -->
    <van-index-bar  >
      <van-index-anchor index="A"  	class="van-anchor-index"></van-index-anchor>
      <van-cell :title="item.name" v-for="(item,index) in listA" :key="item.cityId+index+'a'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="B" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listB" :key="item.cityId+index+'b'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="C"  class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listC" :key="item.cityId+index+'c'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="D"  class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listD" :key="item.cityId+index+'d'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="E" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listE" :key="item.cityId+index+'e'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="F" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listF" :key="item.cityId+index+'f'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="G" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listG" :key="item.cityId+index+'g'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="H" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listH" :key="item.cityId+index+'h'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="I" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listI" :key="item.cityId+index+'i'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="J" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listJ" :key="item.cityId+index+'J'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="K" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listK" :key="item.cityId+index+'k'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="L" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listL" :key="item.cityId+index+'l'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="M" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listM" :key="item.cityId+index+'m'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="N" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listN" :key="item.cityId+index+'n'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="O" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listO" :key="item.cityId+index+'o'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="P" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listP" :key="item.cityId+index+'p'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="Q" class="van-anchor-index" />
      <van-cell :title="item.name" v-for="(item,index) in listQ" :key="item.cityId+index+'q'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="R" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listR" :key="item.cityId+index+'r'" @click="pushRouter(item.cityId)"/>

      <van-index-anchor index="S" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listS" :key="item.cityId+index+'s'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="T" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listT" :key="item.cityId+index+'t'" @click="pushRouter(item.cityId)"/>

      <van-index-anchor index="U" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listU" :key="item.cityId+index+'u'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="V" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listV" :key="item.cityId+index+'v'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="W" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listW" :key="item.cityId+index+'w'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="X" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listX" :key="item.cityId+index+'x'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="Y" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listY" :key="item.cityId+index+'y'" @click="pushRouter(item.cityId)"/>
      <van-index-anchor index="Z" class="van-anchor-index"/>
      <van-cell :title="item.name" v-for="(item,index) in listZ" :key="item.cityId+index+'z'" @click="pushRouter(item.cityId)"/>
     </van-index-bar>
   </div>



  </div>
</template>



<script>
import { Toast } from 'vant';
import cityRequest from "../../request-get/city-request.js";
export default {
  name: "CityList",
  data() {
    return {
      /*城市数组*/ 
      list: [],
      /* 绑定值*/
      value: '',
      /* 这是显示清除按钮的*/ 
      showClear:false,
      // 显示筛选出来的信息 （空的话就是描述信息）
      showDes:false,
      showBar:true
    };
  },
  computed: {
    hotCitys(){
     return  this.list.filter(item=>item.isHot==1)
      
    },
    barList(){
    const arr= this.list.filter(item=>{return item.pinyin.substring(0,this.value.length)==this.value ||item.name.substring(0,this.value.length)==this.value  })
     if(arr){
       return arr
      }else{
       return  []
      }
     
    } ,
    listA() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "a" ||
          item.pinyin.substring(0, 1) == "A"
        );
      });
    },
    listB() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "B" ||
          item.pinyin.substring(0, 1) == "b"
        );
      });
    },
    listC() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "c" ||
          item.pinyin.substring(0, 1) == "C"
        );
      });
    },
    listD() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "d" ||
          item.pinyin.substring(0, 1) == "D"
        );
      });
    },
    listE() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "e" ||
          item.pinyin.substring(0, 1) == "E"
        );
      });
    },
    listF() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "f" ||
          item.pinyin.substring(0, 1) == "F"
        );
      });
    },
    listG() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "g" ||
          item.pinyin.substring(0, 1) == "G"
        );
      });
    },
    listH() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "h" ||
          item.pinyin.substring(0, 1) == "H"
        );
      });
    },
    listI() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "I" ||
          item.pinyin.substring(0, 1) == "i"
        );
      });
    },
    listJ() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "J" ||
          item.pinyin.substring(0, 1) == "j"
        );
      });
    },
    listK() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "K" ||
          item.pinyin.substring(0, 1) == "k"
        );
      });
    },
    listL() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "l" ||
          item.pinyin.substring(0, 1) == "L"
        );
      });
    },
    listM() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "m" ||
          item.pinyin.substring(0, 1) == "M"
        );
      });
    },
    listN() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "N" ||
          item.pinyin.substring(0, 1) == "n"
        );
      });
    },
    listO() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "O" ||
          item.pinyin.substring(0, 1) == "o"
        );
      });
    },

    listP() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "P" ||
          item.pinyin.substring(0, 1) == "p"
        );
      });
    },

    listQ() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "q" ||
          item.pinyin.substring(0, 1) == "Q"
        );
      });
    },

    listR() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "R" ||
          item.pinyin.substring(0, 1) == "r"
        );
      });
    },

    listS() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "s" ||
          item.pinyin.substring(0, 1) == "S"
        );
      });
    },

    listT() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "t" ||
          item.pinyin.substring(0, 1) == "T"
        );
      });
    },

    listU() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "u" ||
          item.pinyin.substring(0, 1) == "U"
        );
      });
    },
    listV() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "v" ||
          item.pinyin.substring(0, 1) == "V"
        );
      });
    },
    listW() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "W" ||
          item.pinyin.substring(0, 1) == "w"
        );
      });
    },
    listX() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "x" ||
          item.pinyin.substring(0, 1) == "X"
        );
      });
    },
    listY() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "Y" ||
          item.pinyin.substring(0, 1) == "y"
        );
      });
    },
    listZ() {
      return this.list.filter((item) => {
        return (
          item.pinyin.substring(0, 1) == "Z" ||
          item.pinyin.substring(0, 1) == "z"
        );
      });
    },
  },
  created() {
    cityRequest.then((res) => {
      // console.log(res);
      for (let i = 0; i < res.length; i++) {
        this.list.push(res[i]);
      }
    });
  },


  methods:{
    oncheck(){
      // 当改变的时候
       if(!this.value){
         this.showDes=false;
         this.showBar=true;
        this.showClear=false;
       }else{
       this.showDes=true;
       this.showBar=false;
         this.showClear=true;
       }
    },
    onSearch() {
      // 点击清除 返回初始化 妆台
      this.value=""
          this.showDes=false;
         this.showBar=true;
        this.showClear=false;
    },
    add(){
      // console.log("这是我点击的");
      // alert("这是我点击的")
      this.show=true;
    },
    pushRouter(cityId){
     this.$store.commit("setCityId",cityId);
     this.$router.push({
       path:"Films",
       query:{
         k:1234
       }
     }) 
    }
  }
};
</script>

<style scoped>

.hotCity-button{
margin-left:25px ;
margin-right:10px;
margin-top: 10px;
margin-bottom: 10px;
height: 30px;
  background-color: #f4f4f4; 
}
.van-anchor-index{
      background-color: #f4f4f4;
}
</style>




